<script lang="ts" setup name="DepartDialog">
import { FormInstance } from 'element-plus'
import { Dialog } from '~/src/api/interface'
import { StoreManagement } from '~/src/api/interface/storeManagement'
import { useHandleDialog } from '~/src/hooks/useHandleData'

const ruleFormRef = ref<FormInstance>()
const rules = reactive({
  number: [{ required: true, message: '请填写部门编码' }],
  name: [{ required: true, message: '请输入部门名称' }],
  role: [{ required: true, message: '请选择部门职能' }],
})

const dialogProps = reactive<Dialog<StoreManagement.DepartmentList>>({
  title: '新增',
  data: {
    id: 0,
    name: '',
    status: 1,
    number: '',
    remark: '',
  },
  visible: false,
})

const acceptParams = (params: Dialog<StoreManagement.DepartmentList>) => {
  Object.assign(dialogProps, params)
  dialogProps.visible = true
}
const { title, visible } = toRefs(dialogProps)

const handleSubmit = async () => {
  await ruleFormRef.value!.validate()
  await useHandleDialog(dialogProps.api as (params: any) => Promise<any>, dialogProps.data, dialogProps.getTableList as () => void)
  dialogProps.visible = false
}

watch(
  () => visible!.value,
  (value) => {
    if (!value) ruleFormRef.value?.resetFields()
  }
)
defineExpose({ acceptParams })
</script>

<template>
  <vab-dialog v-model:modelValue="visible" :title="title + '部门'" :width="600">
    <!-- :disabled="dialogProps.isView"
        :hide-required-asterisk="dialogProps.isView" 是否要禁用 -->
    <el-form ref="ruleFormRef" label-suffix=" :" label-width="100px" :model="dialogProps.data" :rules="rules">
      <el-form-item label="部门编码" prop="number">
        <el-input v-model="dialogProps.data!.number" clearable placeholder="请输入部门编码" />
      </el-form-item>
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="dialogProps.data!.name" clearable placeholder="请输入部门名称" />
      </el-form-item>
      <!-- <el-form-item label="部门职能" prop="roleObject">
        <el-checkbox-group v-model="dialogProps.data!.roleObject">
          <el-checkbox :label="1">出品部门</el-checkbox>
          <el-checkbox :label="2">行政部门</el-checkbox>
          <el-checkbox :label="3">销售部门</el-checkbox>
        </el-checkbox-group>
      </el-form-item> -->
      <el-form-item label="部门描述" prop="remark">
        <el-input v-model="dialogProps.data!.remark" clearable placeholder="请输入部门描述" type="textarea" />
      </el-form-item>
      <el-form-item label="启用状态" prop="status">
        <el-radio-group v-model="dialogProps.data!.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
